<template>
  <div class="filter-view-container">
    <van-popover
      v-model:show="showPopover"
      :actions="actions"
      overlay
      placement="bottom-end"
      :overlay-style="{ background: 'transparent' }"
      @select="onSelect"
    >
      <template #reference>
        <img src="@/icons/svg/customer/filter_icon.svg" />
      </template>
    </van-popover>
  </div>
</template>

<script setup>
import { ref, defineEmits, defineProps, computed } from "vue";

const props = defineProps({
  activeValue: {
    type: String,
    default: "quarter",
  },
});

const actions = computed(() => {
  return [
    {
      text: "本月",
      value: "month",
      color: props.activeValue === "month" ? "#436bff" : "#333",
    },
    {
      text: "本季",
      value: "quarter",
      color: props.activeValue === "quarter" ? "#436bff" : "#333",
    },
    {
      text: "本年",
      value: "year",
      color: props.activeValue === "year" ? "#436bff" : "#333",
    },
  ];
});

const showPopover = ref(false);

const emits = defineEmits(["onCofirm"]);
const onSelect = (action) => {
  emits("onCofirm", action.value);
};

// const show = () => {
//   showPopover.value = true;
// };

// const hidden = () => {
//   showPopover.value = false;
// };
</script>

<style lang="less" scoped>
img {
  cursor: pointer;
}
</style>
